<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .game{
                width: 734px;
                height: 600px;
                margin: 20px auto;
            }
            #box{
                width: 500px;
                height: 500px;
                border: 1px solid;
                float: left;
            }
            #box div{
                width: 98px;
                height: 98px;
                border: 1px solid;
                float: left;
                background: #c5dc48;
            }
            #box div button{
                margin: 0;
                padding: 0;
                border: none;
                width: 97px;
                height: 97px;
                outline: none;
            }
            #box div button:hover{
                cursor: pointer;
            }
            #box img{
                width: 97px;
            }
            #menu{
                background-color: darkgray;
                width: 230;
                height: 504px;
            }
            #menu input{
                margin: 20px 60px;
                padding: 6px 17px;
                font-size: 18px;
                cursor: pointer;
            }
            #menu p{
                margin: 20px 5px;
                font-size: 20px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="game">
            <div id="box">
                <div></div> <div></div> <div></div> <div></div> <div></div>
                <div></div> <div></div> <div></div> <div></div> <div></div>
                <div></div> <div></div> <div></div> <div></div> <div></div>
                <div></div> <div></div> <div></div> <div></div> <div></div>
                <div></div> <div></div> <div></div> <div></div> <div></div>
            </div>
            <div id="menu">
                <input type="button" id="start" value="开始游戏" />
                <input type="button" id="end" value="结束游戏" />
                <input type="button" id="again" value="重新开始" />
                <p id="time"> </p>
                <p id="link"> </p>
                <p id="attack"> </p>
                <p id="pass"> </p>
                <p id="score"> </p>
            </div>
        </div>
    </body>
</html>
<script>
    var img = document.getElementById("box").getElementsByTagName("img");
    var div = document.getElementById("box").getElementsByTagName("div");
    var start = document.getElementById("start");
    var end = document.getElementById("end");
    var again = document.getElementById("again");
    var link = document.getElementById("link");
    var attack = document.getElementById("attack");
    var pass = document.getElementById("pass");
    var record = 0;
    var times = 0;
    var second = 0;
    var frequency = 3000;

    function sec() {
        minute = parseInt(second/60%60);
        document.getElementById("time").innerHTML="已用时"+minute+"分"+second+"秒";
        second++;
        timer3 = setTimeout(sec,1000);
        frequency = frequency-20;
        if (frequency<450) {
            frequency = 450;
        }
    }

    function mouse() {
        var rans = Math.floor(Math.random()*25);
        record++;
        div[rans].innerHTML='<button onclick="dj(this);$remove(this);"><img src="img/01.jpg"/></button>'
        timer2 = setTimeout(xiaoshi,1500);
        function xiaoshi() {
            div[rans].innerHTML='';
        }
            console.log(frequency);
        timer1 = setTimeout(mouse,frequency);
        link.innerHTML='出现次数:'+record;
        pass.innerHTML='漏掉数量:'+(record-times);
        score.innerHTML='得分:'+(times-(record-times));
        if ((times-(record-times))<=-5||(record-times)>=10) {
            alert('游戏结束');
            clearTimeout(timer1);
            clearTimeout(timer2);
            clearTimeout(timer3);
            alert('游戏历时'+minute+'分'+second+'秒');
        }
    }

    function dj(obj) {
        obj.firstElementChild.setAttribute('src',"img/02.jpg");
        times++;
        attack.innerHTML='打中次数'+times;
    }

    function $remove(obj) {
        var obj = obj;
        setTimeout(function () {
            obj.remove();
        },300)
    }

    var link = document.getElementById("link");
    var attack = document.getElementById("attack");
    var pass = document.getElementById("pass");
    var score = document.getElementById("score");

    start.addEventListener('click',zt,false)
    function zt() {
        start.value='暂停游戏';
        mouse();
        sec();
        this.removeEventListener('click',zt,false);
        this.addEventListener('click',ks,false);
    }
    function ks() {
        start.value='继续游戏';
        clearTimeout(timer2);
        clearTimeout(timer1);
        clearTimeout(timer3);
        this.removeEventListener('click',ks,false);
        this.addEventListener('click',zt,false);
    }

    end.onclick=function(){
        clearTimeout(timer1);
        alert('您得到了'+(times-(record-times)+'分'));
    }

    again.onclick=function(){
        window,location.reload();
    }
</script>